<template>
    <div class="main-contain">
        <div class="questionList-Div">
            <el-page-header @back="goBack" >
            </el-page-header>
            <p style="font-size: 19px;margin-top: 10px">{{taskInfo.taskName}}</p>
            <div  :id="'question'+(index+1)" class="question-Div" v-for="(item,index) in questionList" :key="index">
                    <Divider/>
                    <p align="left">{{index+1}}. [{{item.typeName}}] {{item.questionDescription}}</p>
                    <RadioGroup align="left" style="margin-top: 10px" v-model="item.id" vertical>
                        <Radio label="1" disabled>
                            <span>{{item.option1}}</span>
                        </Radio>
                        <Radio label="2" disabled>
                            <span>{{item.option2}}</span>
                        </Radio>
                        <Radio label="3" v-show="item.option3 != ''" disabled>
                            <span>{{item.option3}}</span>
                        </Radio>
                        <Radio v-show="item.option4 != ''" label="4" disabled>
                            <span>{{item.option4}}</span>
                        </Radio>
                    </RadioGroup>
                    <p style="color: #909399;text-align: right">难度: {{item.difficultyName}}</p>
                    <p style="color: #909399;text-align: right">关联知识点: {{item.sectionName}}</p>
                </div>
        </div>
        <div class="questionAnchor">
            <el-button style="height: 40px;margin-top: 10px" type="primary" v-for="(item,index) in questionList" :key="index" @click="goAnchor('#question'+(index+1),index+1)" >{{index+1}}</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                taskId: "",
                courseId:"",
                taskInfo: "",
                questionList: []
            }
        },
        created() {
            this.getParams();

            this.axios.get(this.urls.taskDetail + this.taskId)
                .then((res) => {
                    this.taskInfo = res.data.data;
                    this.questionList = res.data.data.questionInfoVOList;
                    console.log(this.taskInfo);
                    console.log(this.questionList)
                })
        },
        methods: {
            getParams() {
                this.taskId = this.$route.query.taskId;
                this.courseId = this.$route.query.courseId;
            },
            goBack(){
                this.$router.push({
                    name:"courseTaskTeach",
                    query:{
                        courseId:this.courseId
                    }
                })
            },
            // 锚点
            goAnchor(selectDiv,index){
                console.log(index)
               this.$el.querySelector(selectDiv).scrollIntoView();
            }
        },
    }
</script>

<style>
    .main-contain {
        display: flex;
        flex-direction: row;
        padding: 20px;
    }

    .questionList-Div {
        width: 1000px;
        background-color: white;
    }

    .question-Div {

        display: flex;
        flex-direction: column;
        padding-left: 40px;

    }

    .questionAnchor {

        left: 1050px;
        margin-left: 50px;
        width: 400px;
        max-height: 300px;
        background-color: white;
        position:fixed;
    }
</style>